<template>
  <div class="home">
    <h2>home页面</h2>
    <p>vuex的数据:{{ store.state.vuexnum }}</p>
    <p>计算属性得到:{{ comVuexNum }}</p>
    <button @click="changeNumFun">修改vuexnum数据</button>
    <!-- <button @click="getListDataFun">获取lists数据</button> -->
    <p>{{ homeListDatas }}</p>
  </div>
</template>

<script setup>
import { useStore } from 'vuex';
// vue中进行获取
import { computed, reactive } from 'vue';
// 通过store获取实例
const store = useStore()

let comVuexNum = computed(() => store.state.vuexnum)

// 修改数据
let changeNumFun = () => {
  // 通过.value进行修改数据
  store.commit("changeVuexNum", comVuexNum.value + 5)
}

// 准备请求接口的参数
let listParams = reactive({
  page: 1,
  size: 10,
  type: 'is_best'
});
// let homeListDatas = ref(null);
// let getListDataFun = async () => {
//   await store.dispatch('actChangeHomeListDatas', {
//     page: listParams.page,
//     size: listParams.size,
//     type: listParams.type,
//   });
//   console.log(store.state.homeListDatas);
//   homeListDatas.value = store.state.homeListDatas;
// }

store.dispatch('actChangeHomeListDatas', {
  page: listParams.page,
  size: listParams.size,
  type: listParams.type,
});

let homeListDatas = computed(() => store.state.homeListDatas)

</script>
